<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="html" uri="http://struts.apache.org/tags-html" %>
<%@ taglib prefix="bean" uri="http://struts.apache.org/tags-bean" %>
<html>
<head>
    <%@include file="/resource/common/resourceLink.rs" %>
    <script src="/Bank3.0/resource/js/cg-utils.js"></script>
    <title>登录 - 支付宝</title>
</head>
<style>
    .white {
        color: white;
    }
    .twelveFont{
        font-size: 12px;
    }
    .seventeen{
        font-size: 18px;
    }
    .login-btn{
        display: block;
        cursor: pointer;
        width: 96%;
        padding: 0.5% 5%;
        font-size: 18px;
        line-height: 36px;
        height: auto;
        color: #fff;
        font-family: 'Arial', 黑体;
        letter-spacing:5px;
    }
    .login-container{
        background:rgba(0,0,0,0.8);
    }
    .login-body-bg{
        background-repeat:no-repeat;
        background-position:center;
        background-attachment:fixed;
        background-size:cover;
        padding-top: 50px;
    }
    .bottom-nav{
        margin-top: 3%;
        padding-top: 3%;
    }
</style>
<body class="login-body-bg">
    <div class="container-fluid" style="margin-top: 8%;">
    	<!-- 导航栏开始 -->
		<%@ include file="/resource/common/navView.rs" %>
		<!-- 导航栏结束 -->
        <!-- 填充 -->
        <div class="col-md-7">
            <img src='/Bank3.0/resource/images/logo/logo-114.png' />
        </div>
        <div class="col-md-3 login-container">
            <h4 class="text-center">
                <span class="label label-default" style="letter-spacing: 5px;">账号登录</span>
            </h4>
            <form method="post" action='<c:url value="/user/login/index.htm" />' onsubmit="return doCheck()">
                <span class="bg-danger text-center center-block" style="display: table;">
                    <html:errors />
                    ${errors.account} ${errors.password} ${errors.veriftyCode}
                </span>
                <div class="input-group " style="padding: 4%;">
                        <span class="input-group-addon" id="basic-addon1">
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                        </span>
                    <input name="account" type="text" class="form-control"
                           placeholder="账户" data-placement="top" data-content="请输入账户"
                           value="${requestScope.userForm.account}" maxlength="11" />
                </div>
                <div class="input-group" style="padding: 4%;">
                        <span class="input-group-addon">
                            <span class="glyphicon glyphicon-lock"></span>
                        </span>
                    <input name="password" type="password" class="form-control"
                    	   value="${requestScope.userForm.password}" maxlength="18"
                           data-placement="top" data-content="请输入密码" />
                </div>
                <div class="input-group" style="padding: 4%;">
						<span class="input-group-addon">
                            <span class="glyphicon glyphicon-qrcode"></span>
                        </span>
						<input class="form-control input-item" type="text" name="veriftyCode" 
							value="${requestScope.veriftyCode}" maxlength="4"
							data-placement="top" data-content="请输入验证码" placeholder="请输入验证码" />
				</div>
                <c:choose>
                    <c:when test="${not empty sessionScope.user}">
                        <a class="center-block btn btn-info login-btn" href='<c:url value="/index.do" />'>进入我的支付宝</a>
                    </c:when>
                    <c:otherwise>
                    	<div style="padding: 2%; margin-left: 2%">
							<span>
								<img class="lazy-img" data-src='<c:url value="/user/verifty/index.htm" />' id="changeVeriftyCode"/>
								<a href="javascript:getVeriftyCode()">看不清</a>
							</span>
						</div>
		                <p class="text-right ">
		                    <a class="white twelveFont">忘记登录密码？</a>
		                </p>
		                <button type="submit" class="center-block btn btn-info login-btn seventeen">
		                	登录
		                </button>
                    </c:otherwise>
                </c:choose>
                <div class="clearfix" style="padding: 3% 0px">
                    <a class="pull-left white twelveFont">淘宝会员登录</a>
                    <a class="pull-right twelveFont" href='<c:url value="/user/register.html"/> '>免费注册</a>
                </div>
            </form>
        </div>
        <!-- 填充 -->
        <div class="col-md-2"></div>
    </div><!-- 中间部分结束 -->
    <!-- 底部导航 -->
    <div class="bottom bottom-nav white" >
        <ul class="list-inline text-center" >
            <li><a href="#" class="white">关于支付宝 |</a></li>
            <li><a href="#" class="white"> 诚聘英才 | </a></li>
            <li><a href="#" class="white">International Business | </a></li>
            <li><a href="#" class="white" >About Alipay </a></li>
        </ul>
        <h4 class="text-center"><small class="white">&copy;CG银行</small></h4>
    </div>

</body>
<script type="text/javascript">
    $(function () {
        $('[data-toggle="popover"]').popover();
        setBodyBackground();
        lazyLoadImage(500);
    })
    
	function setBodyBackground() {
    	var bgPath = "/Bank3.0/resource/images/login/login-bg-";
        var random = Math.floor(Math.random()*10);
        if(random %2 ==0) {
        	bgPath += 2 + ".jpg";
        } else {
        	bgPath += 1 + ".jpg";
        }
        $('.login-body-bg').css("background-image", "url(" + bgPath + ")");
        //console.log(bgPath);
    }
    
    function doCheck() {
        var flag = false;
        var account = $("[name='account']");
        var password = $("[name='password']");
        var veriftyCode = $("[name='veriftyCode']");
        if (account.val().length != 11) {
            if (account.val().length != 0)
                account.attr('data-content', '账户格式错误');
            showError(account);
        } else if (password.val() == '' || password.val().length < 4) {
            if (password.val().length < 4)
                password.attr('data-content', '密码格式错误');
            showError(password);
        } else if(veriftyCode.val().length != 4) {
        	if (veriftyCode.val() != 0)
        		veriftyCode.attr('data-content', '验证码格式错误');
        	showError(veriftyCode);
        } else {
            flag = true;
        }
        return flag;
    }
    // 显示错误信息
	function showError(selecter) {
		 selecter.popover('show');
         setTimeOut();
	}
    //延时器
    function setTimeOut() {
        setTimeout(function () {
        	$("[name='account']").popover('hide');
        	$("[name='password']").popover('hide');
            $("[name='veriftyCode']").popover('hide');
        }, 2000);
    }
    
    function getVeriftyCode() {
    	$("#changeVeriftyCode").attr("src", '<c:url value="/user/verifty/" />' + new Date().getTime() + '.htm');
	}
</script>
</html>
